<template>
  <div class="body_bgi full bgs_full">
    <big-screen-header :headerName="'' + `${townName + villageName}`" />

    <div class="content_box w_full h_full-100 flex_row_around p_10 border_box">
      <!-- 1 -->
      <div class="w_32_5_p h_full flex_column_between">
        <div class="w_full h_49_p chart_box_bgi_1 p_10">
          <data-chart 
            title="存栏统计"
            path=''
            chartType="环状图"
            :chartData="chartData1" 
            filterText=""
            :filterList="[]"
            :isShowUnit="true"
            :isShowFilterIcon="false"
            :isShowFullIcon="true"
          />
        </div>

        <div class="w_full h_49_p chart_box_bgi_1 p_10">
          <data-chart 
            title="配种数量"
            path=''
            chartType="环状图"
            :chartData="chartData2" 
            filterText=""
            :filterList="[]"
            :isShowUnit="true"
            :isShowFilterIcon="false"
            :isShowFullIcon="true"
          />
        </div>
      </div>

      <!-- 2 -->
      <div class="w_65_p h_full p_10 border_box bgs_full chart_box_bgi_1">
        <!-- 牧户列表 -->
        <div class="full">
          <div class="w_full main_color fw_bold fs_16 ls_2 flex_row_start flex_center">
            <div class="w_1 h_15 main_bgc main_border mr_10"></div>牧户信息
          </div>

          <div class="scroll_box w_full h_full-35 overflow_y_auto mt_10 flex_row_start flex_wrap">
            <div class="w_25_p h_120 p_5" v-for="(item, index) in muhuList" :key="index" @click="handleClickMuhu(item)">
              <div class="w_full h_full flex_row_between bgc_1a396b78 border_radius_10">
                <!-- 头像 -->
                <div class="w_30_p p_5 border_radius_10">
                  <img 
                    v-if="item.avatar"
                    class="h_full object_fit_cover border_radius_10 cursor" 
                    :src="item.avatar" alt=""
                  >
                  <img 
                    v-else
                    class="h_full object_fit_contain border_radius_10 cursor" 
                    :src="def_user_img" alt=""
                  >
                </div>

                <!-- 文字信息 -->
                <div class="info_box w_70_p flex_column_around pl_20 cursor">
                  <div class="text_1 color_fff">牧户: <span class="main_color">{{ item.name}}</span></div>
                  <div class="text_1 color_fff">电话: <span class="font_number ls_2">{{ formatPhone(item.phone) }}</span></div>
                </div>
              </div>
            </div>
          </div>  
        </div>
      </div> 
    </div>
  </div>
</template>

<script>
  import defMixin from '@/mixins/def.js' 
  import componentsMixin from '@/mixins/components.js'
  import imgMixin from '@/mixins/def-img.js'

  import muHuList from '@/assets/js/muHu.js'

  export default {
    name: 'VillagePage',
    mixins: [defMixin, componentsMixin, imgMixin],
    data() {
      return {
        chartData1: {},
        chartData2: {},

        townId: null,
        townName: null,
        villageId: null,
        villageName: null,

        muhuList: [

        ],
      }
    },
    async mounted() {
      let townId = this.$route.params.townId
      let townName = this.$route.params.townName
      let villageId = this.$route.params.villageId
      let villageName = this.$route.params.villageName
      
      this.townId = townId
      this.villageId = villageId
      this.townName = townName
      this.villageName = villageName

      this.initChart()
      this.initMuHu(villageName)
    },
    methods: {  
      initChart() {
        this.chartData1 = {
          unit: '只',
          data: [
            { name: '种公羊', value: 334 },
            { name: '种母羊', value: 1434 },
            { name: '羔羊', value: 1435 },
          ]
        }

        this.chartData2 = {
          unit: '只',
          data: [
            { name: '种公羊', value: 172 },
            { name: '种母羊', value: 874 },
          ]
        }
      },

      initMuHu(villageName) {
        if (villageName == '布日德嘎查') {
          this.muhuList = muHuList.bu_ri_gu_de_muhu
        } else if (villageName == '贝尔社区') {
          this.muhuList = muHuList.bei_er_she_qu 
        } else if (villageName == '芒来嘎查') {
          this.muhuList = muHuList.bei_er_she_qu 
        }
      },

      // 跳转到牧户详情页
      handleClickMuhu(item) {
        let path = ''
        if (item.isType) {
          path = `/muHuPage1/${item.isType}/${item.id}`
        } else {
          path = `/muHuPage/${this.townId}/${this.townName}/${this.villageId}/${this.villageName}/${item.id}/${item.name}/${item.phone}`
        }
        this.goToPage(path)
      },
    }
  }
</script>